<template>
	<view>
		<!-- 顶部滚动条 -->
		<uni-section  >
					<uni-notice-bar show-icon scrollable
						text="用心挑选每一种养老药品，为父母的健康筑起坚固的防线，让他们享受无忧无虑的金色年华。选择高品质的养老药品，不仅是为了父母的身体健康，更是为了他们心灵的安宁，让爱与关怀伴随每一个温馨的瞬间。" />
		</uni-section>
				<!-- 滚动 -->
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
					:dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
						<swiper-item v-for="(item, index) in 3" :key="index">
							<view class="swiper-item" :class="'swiper-item' + index">
								<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
							</view>
						</swiper-item>
					</swiper>
		</uni-swiper-dot>
				<uni-section >
					<uni-card title="老人信息"   :thumbnail="avatar"  >
						<text class="uni-body">
							<navigator url="/pages/health/userinfo" >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</navigator>
						</text>
					</uni-card>
					<uni-card title="健康信息"   :thumbnail="avatar" >
						<text class="uni-body">
							<navigator url="/pages/health/healthinfo" >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</navigator>
						</text>
					</uni-card>
					<uni-card title="用药信息"   :thumbnail="avatar" >
						<text class="uni-body">
							<navigator url="/pages/health/medicineinfo" >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</navigator>
						</text>
					</uni-card>
					<!-- <uni-card title="健康数据"  extra="额外信息" :thumbnail="avatar" @click="onClick">
						<text class="uni-body">这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
					</uni-card> -->
					<uni-card title="体检报告"   :thumbnail="avatar" >
						<text class="uni-body">
							<navigator url="/pages/health/assessmentinfo" >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</navigator>
						</text>
					</uni-card>
				</uni-section>
				
	</view>
</template>

<script>
import { ref } from "vue"
	export default {
		data() {
			return {
				avatar: 'https://img0.baidu.com/it/u=765762096,721419770&fm=253&fmt=auto&app=138&f=JPEG?w=958&h=500',
				info: [{
										colorClass: 'uni-bg-red',
										url: 'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E8%84%91%E7%99%BD%E9%87%91&step_word=&lid=7949651471633015211&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=14267792,2916901963&os=771580926,3530326969&simid=3105784541,3011230004&pn=23&rn=1&di=41943041&ln=1152&fr=&fmq=1733816835696_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=10&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2F240622%2Fbeautify%2Ffff7694eda67c17ad2910c043de57f7d.jpeg&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwzLDEsMiwxMyw3LDYsNSwxMiw5',
										content: '内容 A'
									},
									{
										colorClass: 'uni-bg-green',
										url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
										content: '内容 B'
									},
									{
										colorClass: 'uni-bg-blue',
										url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
										content: '内容 C'
									}
								],
								dotStyle: [{
										backgroundColor: 'rgba(0, 0, 0, .3)',
										border: '1px rgba(0, 0, 0, .3) solid',
										color: '#fff',
										selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
										selectedBorder: '1px rgba(0, 0, 0, .9) solid'
									},
									{
										backgroundColor: 'rgba(255, 90, 95,0.3)',
										border: '1px rgba(255, 90, 95,0.3) solid',
										color: '#fff',
										selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
										selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
									},
									{
										backgroundColor: 'rgba(83, 200, 249,0.3)',
										border: '1px rgba(83, 200, 249,0.3) solid',
										color: '#fff',
										selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
										selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
									}
								],
								modeIndex: -1,
								styleIndex: -1,
								current: 0,
								mode: 'default',
								dotsStyles: {},
								swiperDotIndex: 0
			}
		},
		onLoad() {},
		methods: {
			//出现信息弹窗
			onClick(){
					this.DialogVisible1 = true;
					this.DialogVisible2 = false;
					},
			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			}
		}
	}
</script>

<style>

</style>
